<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<title>容器布局</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript" src="/js/axios.js"></script>
		<!-- 引入组件库 -->
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="js/jquery-3.1.0.js"></script>
		<style type="text/css">
			<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
.text-muted {
    color: #98a6ad;
}
.font-13 {
    font-size: 13px !important;
}
.col-sm-6 {
    width: 50%;
}
.text-right {
    text-align: right;
}
.m-t-10 {
    margin-top: 10px !important;
}
.fixed-table-container.overflow-x-auto {
    overflow-x: auto;
    overflow-y: hidden;
}
.fixed-table-container {
    border: 1px solid #ebeff2 !important;
}
.fixed-table-container {
    position: relative;
    clear: both;
}
.bootstrap-table .table {
    margin-bottom: 0!important;
    border-bottom: 1px solid #ddd;
    border-collapse: collapse!important;
    border-radius: 1px;
}
.fixed-table-container table {
    width: 100%;
}
.table-bordered {
    border: 1px solid #ebeff2;
}
table thead, table thead a {
    font-family: "microsoft yahei";
    font-size: 12px;
}
table thead {
    border-bottom: 2px solid #a7b7c3;
}
.crm .bootstrap-table .overflow-x-auto .table > thead > tr > th {
    border-bottom: 2px solid #a7b7c3;
    background: #ebeff2;
}
.fixed-table-container tbody td .th-inner, .fixed-table-container thead th .th-inner {
    padding: 8px;
    line-height: 24px;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.th-inner {
    padding: 9px 12px !important;
}
a.na:link {
    color: #000;
    font-family: "microsoft yahei";
}
a {
    text-decoration: none !important;
}
</style>
		</style>
	</head>
	<body>
		<div class="box">
		<!-- <el-header>：顶栏容器。
			 <el-aside>：侧边栏容器。 
			 <el-main>：主要区域容器。
			 <el-footer>：底栏容器。-->
		<el-container>
			<el-header height="85px">
			<div>
				<div class="form-group ">
					<i class="el-icon-caret-bottom"></i>
					<!-- 自动搜索建议组件 -->
					<el-autocomplete style="width:110px;" class="inline-input" 
					v-model="val"
					:fetch-suggestions="querySearch"
					placeholder="全部数据"
					@select="handleSelect">
					</el-autocomplete>
					<i class="el-icon-search" style="margin-left: 5px;"></i>
					
					<el-input style="width: 110px;"  placeholder="请输入内容"></el-input>
					<el-button type="info" >搜索主题</el-button>
				</div>
			</div>	
			<!-- <el-header height="35px">
			</el-header> -->
			<div  style="height: 35px; width: 100%; " >
				<div style="width: 50%;float: left;margin-top: 10px;">
					<span set-lan="html:销售机会" style="font-size: 15px;">销售机会</span>
					<small class="text-muted font-13">共10条</small>
					<el-button type="danger" size="mini">解除搜索</el-button>
				</div>
				
				<div style="width: 10%;float:right;margin-top: 5px;" id="a">
					<el-button  v-on:click="greet">新建</el-button>
					
					<!-- <el-button type="danger" size="mini">解除搜索</el-button> -->
					
				</div>
				
			</div>
			
			
			
			
		</el-header>
		<!-- <div class="tab-content p-0">
		<div class="bootstrap-table m-t-10">
			<div class="fixed-table-container overflow-x-auto">
				<table class="table table-bordered table-hover table-z" id="qlist_table">
					<thead>
						<tr>
							<th class="bs-checkbox" style="width: 36px;">
								<div class="th-inner">
									<input type="checkbox"/>
								</div>
							</th>
							<th class="th-inner">
							<p><a href="#">ID</a></p>
							</th>
							<th class="th-inner">
							<p><a href="#">机会主题</a></p>
							</th>
							<th class="th-inner">
							<p><a href="#">优先</a></p>
							</th>
							<th class="th-inner">
							<p><a href="#">星标</a></p>
							</th>
							<th class="th-inner">
							<p><a href="#">类型</a></p>
							</th>
							<th class="th-inner">
							<p><a href="#">负责人</a></p>
							</th>
							<th class="th-inner">
							<p><a href="#">签单预期时间</a></p>
							</th>
							<th class="th-inner">
							<p><a href="#">预期金额</a></p>
							</th>
							<th class="th-inner">
							<p><a href="#">可能性</a></p>
							</th>
							<th class="th-inner">
							<p><a href="#">Stage</a></p>
							</th>
							<th class="th-inner">
							<p><a href="#">操作</a></p>
							<a href="/bianji" target="blamk">aaa </a>
							</th>
						</tr>
					</thead>
				</table>
			</div>
		
		</div>
		
		</div>
			<table class="table table-bordered table-hover table-z" id="qlist_table">
			
			
			
			</table> -->
		
		
				 <template>
				<el-table
				    :data="tableData"
				    border
				    style="width: 100%">
					
					<el-table-column
				      type="selection"
				      width="55">
				
				    </el-table-column>
				    <el-table-column prop="salesid" label="id" width="50">
				    </el-table-column>
				    <el-table-column
				      prop="salestheme"
				      label="机会主题"
				      width="100">
				    </el-table-column>
				    <el-table-column
				    prop="customerBean.cname"
				    label="customer"
				    width="100">
				    </el-table-column>
					<el-table-column
					prop="first"
					label="优先"
					width="80">
					</el-table-column> 
					<el-table-column
					prop="starstandard"
					label="星标"
					width="70">
					</el-table-column> 
				    <el-table-column
				    prop="type"
				    label="类型"
				    width="70">
				    </el-table-column> 
					<el-table-column
					prop="personcharge"
					label="负责人"
					width="70">
					</el-table-column> 
					<el-table-column
					prop="state"
					label="状态"
					width="70">
					</el-table-column> 
					<el-table-column
					prop="expecttime"
					label="签单预期时间"
					width="110">
					</el-table-column>
					
					<el-table-column
					prop="expectmony"
					label="预期金额"
					width="110">
					</el-table-column>
					
					<el-table-column
					prop="possibility"
					label="可能性"
					width="80">
					</el-table-column>
					<el-table-column
					prop="Stage"
					label="Stage"
					width="80">
					</el-table-column>
					<el-table-column
					prop="stagestop"
					label="阶段停留"
					width="80">
					</el-table-column>
					<el-table-column
					prop="updatetime"
					label="更新日期"
					width="100">
					</el-table-column>
					
				    <el-table-column
				      fixed="right"
				      label="操作"
				      width="100">
				      <template slot-scope="scope">
				        <el-button id=chakan @click="handleClick" type="text" size="small">查看</el-button>
				        <el-button type="text" @click="bianji(scope.row.salesid,scope.row.salestheme,scope.row.state,scope.row.expectmony,scope.row.possibility,
				        scope.row.starstandard,scope.row.first,scope.row.type)" size="small">编辑1</el-button>
				      </template>
				    </el-table-column>
				  </el-table>
				  <div style="margin-left:15px;">
				 	<el-row>
 
 					 <el-button @click="shanchu()"  type="danger" icon="el-icon-delete" circle></el-button>
					</el-row>
				 	</div>
					<div class="block" style="margin:0 auto;">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage4"
						:page-size="1000"
						layout="total, sizes, prev, pager, next, jumper"
						:total="mypager.pages">
					</el-pagination>
					</div>
				  	<!-- :page-sizes="[100, 200, 300, 400]" -->
				</template> 
			<el-footer>
			</el-footer>
		</el-container>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:".box",
				data:{
					mypager:{},
					currentPage4: 999,
					val:'',
					tableData: [],
					total:34,
				},	
				create:function(){
				},
				methods:{															
					//queryString实时的文本框的值,cb回调函数
				querySearch:function(queryString, cb){
					var allarr=[
						 { "value": "三全鲜食"},
						 { "value": "全部信息"},
						 { "value": "你好"}
					];
					var result=[]; 
					//遍历所有的选项
					allarr.forEach(v=>{
						//如果文本框中的值和选项相符,则返回该选项
						if(v.value.indexOf(queryString)>=0){
							result.push(v);
						}
					})
					//将结果传递给回调函数,显示在最终的建议列表处
					cb(result);
				},
				handleSelect:function(it){
					console.log(it)
				},
				bianji:function(salesid,salestheme,state,expectmony,possibility,starstandard,first,type){
					if(first==null){
						first="*"
					}
					if(state==null){
						state="*"
					}
					if(expectmony==null){
						expectmony="*"
					}
					var aa=possibility;
					var ss = aa.substr(0, 2);
				//	alert("salesid"+salesid+"salestheme"+salestheme+"state"+state+"expectmony"+expectmony+"possibility"+possibility+"first"+first);
					$('#main').load("bianji?salesid="+salesid+"&salestheme="+salestheme+"&state="+state+"&expectmony="+expectmony+"&starstandard="+starstandard+"&first="+first+"&type="+type+"&possibility1="+ss);
					
				},
					handleSizeChange(val) {
						console.log(`每页 ${val} 条`);
					},
					handleCurrentChange(val) {
						console.log(`当前页: ${val}`);
					}
					,loadData(){
							 var $this=this;
						  axios.post("saget")
							.then(function(v){
								//console.log(v.data);
								$this.tableData=v.data.list;
								$this.mypager=v.data;
								console.log(v.data.list);
							}).catch(function(e){
								alert(e);
							})
					},handleClick(){
						
					},shanchu(){
						if (rows) {
					          rows.forEach(row => {
					            this.$refs.multipleTable.toggleRowSelection(row);
					          });
					        } else {
					          this.$refs.multipleTable.clearSelection();
					        }
					},
					
					greet: function (event) {
					      // `this` 在方法里指向当前 Vue 实例
					    //  alert('Hello ' + this.name + '!')
					      // `event` 是原生 DOM 事件
					    //  if (event) {
					   //     alert(event.target.tagName)
					   //   }
					      
						 //this.$router.push({name: 'newSalae'});
					    }
					
				},
				mounted(){
				
					this.loadData();
				}
			})
		</script>
		
		<script>
		
		$(function(){
			
			$("#a").click(function(){
				$('#main').load('xinjian');
			})
		});
		</script>
		
	</body>
</html>
